<template>
  <div>

    <myheader></myheader>




	<section class="featured-block text-center">
		<div class="container">

			<div>

        <Breadcrumb :datas="datas"></Breadcrumb>


      </div>
      <div>

        <table>

          <tr>

            <td>用户名：</td>
            <td>
              <input type="text" v-model="username" placeholder="请输入用户名"/>
            </td>

          </tr>
          <tr>

            <td>密码：</td>
            <td>
              <input type="password" v-model="password" placeholder="请输入密码"/>
            </td>

          </tr>

          <tr>

            <td>验证码</td>
            <td>
              <input type="text" v-model="code">

            </td>

          </tr>

          <tr>

            <td></td>
            <td>
              <img :src="src" />
            </td>

          </tr>

          <tr></tr>
          <tr>

            <td></td>
            <td>
              <Button @click="submit" color="blue">登 录</Button>
            </td>

          </tr>

        </table>

      </div>



		</div>
	</section>


	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>
//导入组件
import myheader from './myheader.vue'

export default {
  data () {
    return {
      //表单数据
      username:'',
      password:'',
      code:'',
      src:'http://127.0.0.1:8000/code/',
      //面包屑导航
      datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}]
    }
  },
  //注册组件标签
  components:{
    'myheader':myheader
  },
  mounted:function(){



},
  methods:{

     //定义提交事件
    submit:function () {
      //非空验证
      if(this.username == ''){
        this.$Message('您没有输入用户名')
        return false;
      }
      if(this.password == ''){
        this.$Message('密码不能为空')
        return false;
      }

      //请求后台接口 get==>params  post==>data
      this.axios.get('http://localhost:8000/login/',{params:{username:this.username,password:this.password}}).then((result) =>{

        console.log(result)
        //登陆成功存储locaStorge
        localStorage.setItem('username',result.data.username)
        localStorage.setItem('uid',result.data.uid)

        this.$Message(result.data.message);
        //登陆成功跳转首页
        this.$router.push('/')

      })

    }
  }
}


</script>

<style>

td {
  padding: 15px;
}

</style>
